<template>
    <a-form @keypress.enter="handleSearch">
        <flexbox wrap="wrap">
            <flexbox class="margin-b-16 margin-r-16">
                <span>产线/产品：</span>
                <SelectCatalogCode ref="SelectCatalogCodeRef" :changeOnSelect="true" v-model:value="form.catalogCode" />
            </flexbox>
            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">产品类型：</span>
                <a-select v-model:value="form.productGrade" style="min-width: 80px" allowClear class="margin-r-8">
                    <a-select-option key="L1">L1</a-select-option>
                    <a-select-option key="L2">L2</a-select-option>
                    <a-select-option key="L3">L3</a-select-option>
                    <a-select-option key="L4">L4</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">是否有年度规划：</span>
                <a-select v-model:value="form.isAnnualPlanning" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">是否进行路标规划：</span>
                <a-select v-model:value="form.isSignpostPlan" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <HSuggestInput allowClear v-model:value="form.catalogName" placeholder="请输入系统名称关键字" @change="handleSearch" />
            </flexbox>

            <flexbox class="margin-b-16" justify="flex-end" style="flex: 1">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </flexbox>
    </a-form>
</template>

<script lang="ts">
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { HSuggestInput, SelectCatalogCode } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref } from 'vue';
export default defineComponent({
    components: {
        HSuggestInput,
        SelectCatalogCode
    },
    emits: ['change'],
    setup(_, { emit }) {
        const { saveHistory } = useSearchHistory();
        const SelectCatalogCodeRef = ref<any>();
        const state = reactive<any>({
            form: {
                productGrade: null,
                catalogCode: null,
                catalogType: null,
                isAnnualPlanning: null,
                isSignpostPlan: null,
                catalogName: ''
            }
        });

        const handleSearch = () => {
            if (state.form.catalogName) {
                saveHistory(state.form.catalogName);
            }
            emit('change', {
                ...state.form
            });
        };
        const handleReset = () => {
            state.form = {
                productGrade: null,
                catalogCode: null,
                catalogType: null,
                isAnnualPlanning: null,
                isSignpostPlan: null,
                catalogName: ''
            };
            unref(SelectCatalogCodeRef).handleClear();
            handleSearch();
        };

        return {
            SelectCatalogCodeRef,
            ...toRefs(state),
            handleSearch,
            handleReset
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>